<html>
	<head>
		<title>js校验form表单</title>
		<meta charset="UTF-8"/>
		<!--声明css代码域-->
		<style type="text/css">
			/*设置背景图片*/
			body{
				background-image: url(img/b.jpg);
			}
			/*设置tr样式*/
			tr{
				height: 40px;
			}
			/*设置div样式*/
			#showdiv{
				border: solid 1px #FF0000;
				border-radius: 10px;
				width: 500px;
				margin: auto;
				margin-top: 40px;	
			}
			/*设置table*/
			table{
				margin: auto;
				color: white;	
			}
			span{
				font-size:13px;
			}
			#codeSpan{
				font-size:20px;
			}
		</style>
		<!--声明js代码域-->
		<script type="text/javascript">
			//常见验证码
				function createCode(){
					//创建随机四位数字
					var code=Math.floor(Math.random()*9000+1000);
					//获取元素对象
					var span=document.getElementById("codeSpan");
					//将数字存放到span中
					span.innerHTML=code;					
				}
			//验证用户名
				function checkUname(){
					//获取用户的用户名信息
						var uname=document.getElementById("uname").value;
					//创建校验规则
						var reg=/^[\u4e00-\u9fa5]{2,4}$/
					//获取span对象
						var span=document.getElementById("unameSpan");
					//开始校验
						if(uname=="" || uname==null){
							//输出校验结果
							span.innerHTML="用户名不能为空";
							span.style.color="red";
							return false;
						}else if(reg.test(uname)){
							//输出校验结果
							span.innerHTML="用户名ok";
							span.style.color="green";
							return true;
						}else{
							//输出校验结果
							span.innerHTML="用户名不符合规则";
							span.style.color="red";
							return false;
						}
					
				}
			//验证密码
				function checkPwd(){
					//获取用户的密码信息
						var pwd=document.getElementById("pwd").value;
					//创建校验规则
						var reg=/^[a-z]\w{5,7}$/;
					//获取span对象
						var span=document.getElementById("pwdSpan");
					//开始校验
						if(pwd=="" ||pwd==null){
							//输出校验结果
							span.innerHTML="*密码不能为空";
							span.style.color="red";
							return false;
						}else if(reg.test(pwd)){
							//输出校验结果
							span.innerHTML="*密码ok";
							span.style.color="green";
							return true;
						}else{
							//输出校验结果
							span.innerHTML="*密码格式不正确";
							span.style.color="red";
							return false;
						}
					checkPwd2();
				}
			//校验确认密码
				function checkPwd2(){
					//获取第一次密码
					var pwd=document.getElementById("pwd").value;
					//获取确认密码
					var pwd2=document.getElementById("pwd2").value;
					//获取span对象
					var span=document.getElementById("pwd2Span");
					//比较两次密码是否相同
					if(pwd2==""||pwd2==null){
						span.innerHTML="确认密码不能为空";
						span.style.color="red";
						return false;
					}else if(pwd==pwd2){
						span.innerHTML="确认密码ok";
						span.style.color="green";
						return true;
					}else{
						span.innerHTML="两次密码不一致";
						span.style.color="red";
						return false;
					}
				}
			//校验手机号
				function checkPhone(){
					return checkField("phone",/^1[3,4,5,7,8]\d{9}$/);
				}
			//校验邮箱
				function checkMail(){
					return checkField("mail",/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/ )
					
					
				}
			//校验籍贯
				function checkAddress(){
					//获取用户选择的数据
					var sel=document.getElementById("address").value;
					//获取span
					var span=document.getElementById("addressSpan");
					//校验
					if(sel!=0){
						span.innerHTML="籍贯选择成功";
						span.style.color="green";
						return true;
					}else{
						span.innerHTML="籍贯不能为请选择";
						span.style.color="red";
						return false;
					}
					
					
				}
			//校验爱好
				function checkFav(){
					//获取所有的爱好
					var favs=document.getElementsByName("fav");
					//获取span
					var span=document.getElementById("favSpan");
					//遍历
					for(var i=0;i<favs.length;i++){
						if(favs[i].checked){
							span.innerHTML="爱好选择成功";
							span.style.color="green";
							return true;
						}
					}
					
					span.innerHTML="爱好至少选则一项";
					span.style.color="red";
					return false;
					
				}
			//校验是否同意公司协议
				function checkAgree(){
					document.getElementById("sub").disabled=!document.getElementById("agree").checked;
				}
			//提交判断
				function checkSub(){
					checkUname();
					checkPwd();
					checkPwd2();
					checkPhone();
					checkMail();
					checkAddress();
					checkFav();
					return checkUname()&&checkPwd()&&checkPwd2()&&checkPhone()&&checkMail()&&checkAddress()&&checkFav();
				}
/*-------------------------------------------------------------------------------------------------*/
			//封装校验:相同的保留，不同的传参。
			function checkField(id,reg){
				//获取用户数据
					var inp=document.getElementById(id);
					var va=inp.value;
				 	var alt=inp.alt;
				//创建校验规则
				//获取span对象
					var span=document.getElementById(id+"Span")
				//开始校验
					if(va=="" ||va==null){
						//输出校验结果
						span.innerHTML=alt+"不能为空";
						span.style.color="red";
						return false;
					}else if(reg.test(va)){
						//输出校验结果
							span.innerHTML=alt+"ok";
							span.style.color="green";
							return true;
					}else{
						//输出校验结果
							span.innerHTML=alt+"不符合规则";
							span.style.color="red";
							return false;
					}
			}
		</script>
	</head>
	<body onload="createCode()">
		<div id="showdiv">
		<form action="#" method="get" onsubmit="return checkSub()">
			<table>
				<tr>
					<td width="80px">用户名:</td>
					<td width="200px">
						<input type="text" name="uname" id="uname" value="" onblur="checkUname()" alt="用户名"/><span id="unameSpan">*2-4位汉字</span>
					</td>
				</tr>
				<tr>
					<td>密码:</td>
					<td>
						<input type="password" name="pwd" id="pwd" value="" onblur="checkPwd()"/>
						<span id="pwdSpan"></span>
					</td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td>
						<input type="password" name="pwd2" id="pwd2" value="" onblur="checkPwd2()"/>
						<span id="pwd2Span"></span>
					</td>
				</tr>
				<tr>
					<td>手机号:</td>
					<td>
						<input type="text" name="phone" id="phone" value="" alt="手机号" onblur="checkPhone()"/>
						<span id="phoneSpan"></span>
					</td>
				</tr>
				<tr>
					<td>邮箱：</td>
					<td>
						<input type="text" name="mail" id="mail" value="" alt="邮箱" onblur="checkMail()"/>
						<span id="mailSpan"></span>
						
				</tr>
				<tr>
					<td>性别</td>
					<td>
						男 <input type="radio" name="sex" id="sex" value="0" checked="checked"/>
						女 <input type="radio" name="sex" id="sex" value="1" />
					</td>
				</tr>
				<tr>
					<td>籍贯:</td>
					<td>
						<select name="address" id="address" onchange="checkAddress()">
							<option value="0">--请选择--</option>
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3">广州</option>
						</select>
						<span id="addressSpan"></span>
					</td>
				</tr>
				<tr>
					<td>爱好:</td>
					<td>
						<input type="checkbox" name="fav" id="" value="1" onclick="checkFav()"/>LOL
						<input type="checkbox" name="fav" id="" value="2" onclick="checkFav()"/>睡觉
						<input type="checkbox" name="fav" id="" value="3" onclick="checkFav()"/>吃饭<br />
						<input type="checkbox" name="fav" id="" value="4" onclick="checkFav()"/>打豆豆
						<input type="checkbox" name="fav" id="" value="5" onclick="checkFav()"/>看电影
						<input type="checkbox" name="fav" id="" value="6" onclick="checkFav()" />听歌
						<span id="favSpan"></span>
					</td>
				</tr>
				<tr>
					<td>个人介绍:</td>
					<td>
						<textarea name="intro" rows="4" cols="40" id="intro"></textarea>
						
					</td>
				</tr>
				<tr>
					<td>验证码:</td>
					<td>
						<input type="text" name="code" id="code" value="" style="width: 100px;"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<span id="codeSpan" onclick="createCode()" style="background-image: url(img/code.jpg.gif);color: black;"></span>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center"><input type="checkbox" name="" id="agree" value="" onclick="checkAgree()"/>是否同意本公司协议</td>
				</tr>
				<tr>
					<td colspan="2" align="center"><input type="submit" name="" id="sub" value="立即注册" disabled="disabled"/></td>
				</tr>
			</table>
		</form>
		</div>
	</body>
</html>